Add adventure idea "The Accessibility Nightmare"#63
Conversation
KatharinaSick
left a comment
KatharinaSick
left a comment
There was a problem hiding this comment.
Thanks a lot for submitting this adventure. I love the idea and how everything builds up to a pretty exciting system in expert! 😊
I left two questions in the review. I don't have much experience in accessiblity (unfortuantely) so they're really curious questions to understand the adventure better.
Would you be up for also implementing the adventure once the idea has been merged?
|
|
||
| #### Tools & Infrastructure | ||
|
|
||
| - **Tools:** Lighthouse, axe DevTools, NVDA/VoiceOver, Browser DevTools |
There was a problem hiding this comment.
I don't have much experience in this field so please correct me if I'm wrong but a quick research showed that axe DevTools & VoiceOver are not open source tools -> would it work to replace those with pure open source tools?
If VoiceOver is the default on mac and NVDA on Windows it's fine too. Please just add some context.
There was a problem hiding this comment.
You're spot on! axe DevTools and VoiceOver aren't strictly open-source. To add the requested context: for manual testing, we will use the free, OS-default screen readers (VoiceOver on macOS, NVDA on Windows) since they are the industry standard. For all automated testing inside the devcontainer, we will rely purely on open-source tools like axe-core (via Playwright) and pa11y.
|
|
||
| The current UI kit lacks focus management, uses incorrect ARIA roles, and has no automated testing. Modals trap focus incorrectly, dropdowns aren't navigable by screen readers, and forms lack proper error announcements. Every time a developer builds a new feature, they introduce new accessibility bugs. | ||
|
|
||
| #### Objective |
There was a problem hiding this comment.
This level sounds amazing! Will it be possible to verify that the player has completed all of those objectives using a script in the devcontainer?
There was a problem hiding this comment.
Yes, absolutely! We can use a Playwright script integrated with axe-core to run automated audits against the local server. It will check for WCAG violations and keyboard focus issues, returning a clear pass/fail exit code to verify the player's progress in the devcontainer.
|
Oh and please sign your commits for the DCO check to become green. |
|
fyi: I'll be on vacation the rest of the week but I'll make sure to get back to this idea first thing on Monday morning |
Adds a new challenge concept focused on modern web accessibility, covering WCAG 2.2 standards, the European Accessibility Act (EAA), and automated compliance in CI/CD pipelines. The adventure is structured in three progressive levels: - 🟢 Beginner: Initial audit and fixing basic WCAG violations - 🟡 Intermediate: Building an accessible component library - 🔴 Expert: Implementing CI/CD gates and production RUM monitoring Signed-off-by: Homayoun <homayoun763@gmail.com>
homayounmmdy
force-pushed
the
idea/accessibility-nightmare
branch
from
4ccc5c0 to
a060305
Compare
|
Thanks @KatharinaSick ! I've sign my commits for the DCO. Regarding implementing the adventure: I'm a bit tied up at the moment and might not have the bandwidth to work on the implementation myself right now. However, it would be great to merge this idea first and create a separate tracking issue for the implementation. That way, someone else can pick it up, or I can contribute to it later when my schedule clears up! Also, thanks for the heads-up about your schedule. Enjoy your vacation, and we can pick this up next week! |
2 participants
🧭 New Adventure Idea: The Accessibility Nightmare
Hi ! 👋
Responding to the open call for new challenge ideas, I'd like to propose "The Accessibility Nightmare".
This adventure tackles a highly relevant, real-world problem: navigating modern web accessibility compliance (WCAG 2.2 and the newly enforced European Accessibility Act). It takes learners from basic auditing all the way to enterprise-grade CI/CD automation and production monitoring.
📖 The Concept
ShopSmart's e-commerce expansion is blocked by ADA lawsuits and strict EAA fines. As the lead frontend engineer, the learner must audit the broken site, build an accessible component library, and automate compliance to save the EU launch.
✨ Key Features
📂 Files Added
ideas/adventure-accessibility-nightmare.md- The full adventure proposal.✅ Checklist
ideas/directoryCloses #26